<template>
  <div id="app">
    <top></top>
    <router-view/>
    <bottom></bottom>
  </div>
</template>

<script>
  import Top from "./components/Top"
  import Bottom from "./components/Footer"
  export default {
    name: 'app',
    components: {
      Top,
      Bottom
    },
    created() {
      //在页面加载时读取sessionStorage里的状态信息
      if (sessionStorage.getItem("state")) {
        this.$store.commit('userStatusSessionStorage', this.qs.parse(sessionStorage.getItem("state")));
      }
    },
    mounted() {
      // sessionStorage必须以字符串的形式存储
      //在页面刷新时将信息保存到sessionStorage里
      window.addEventListener("beforeunload", () => {
        sessionStorage.setItem("state", this.qs.stringify(this.$store.state));  // stringify转为字符串
      });
    }
  }
</script>

<style>
  @import "./assets/css/base.css";

  #app {
    margin: 0 auto;
  }
</style>
